<script lang="ts" setup>
import { ref } from "vue";
</script>

<template>
    <div class="footer-container">
        <el-row :gutter="20" justify="center" align="middle">
            <!-- 第一部分: 项目名称和版权 -->
            <el-col :span="5">
                <div class="footer-section">
                    <h3>就业直通车</h3>
                    <p>Copyright © 2025 就业直通车</p>
                    <p>粤ICP备XXXXXXXX号</p>
                </div>
            </el-col>

            <el-divider direction="vertical" />

            <!-- 第二部分: 联系我们 -->
            <el-col :span="5">
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p>公司名称: XXX科技有限公司</p>
                    <p>公司地址: 广东省广州市XXX区XXX路XX号</p>
                    <p>反馈建议: feedback@example.com</p>
                </div>
            </el-col>

            <el-divider direction="vertical" />

            <!-- 第三部分: 企业服务 -->
            <el-col :span="5">
                <div class="footer-section">
                    <h3>企业服务</h3>
                    <p>职位搜索</p>
                    <p>就业直通车APP</p>
                    <p>投资者关系</p>
                </div>
            </el-col>

            <el-divider direction="vertical" />

            <!-- 第四部分: 关注我们 -->
            <el-col :span="5">
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-icons">
                        <img src="@/assets/img/weixin.png" alt="微信" />
                        <img src="@/assets/img/douyin.png" alt="抖音" />
                        <img src="@/assets/img/bilibili.png" alt="哔哩哔哩" />
                        <img src="@/assets/img/weibo.png" alt="微博" />
                        <img src="@/assets/img/zhihu.png" alt="知乎" />
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
.footer-container {
    padding: 30px 0;
    background-color: #ececfa;
}

.footer-section {
    padding: 0 15px;
}

.footer-section h3 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #333232;
}

.footer-section p {
    margin: 8px 0;
    font-size: 14px;
    color: #333232;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.social-icons img {
    width: 30px;
    height: 30px;
}

.el-divider--vertical {
    height: 120px;
    margin: 0 20px;
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
    .footer-container {
        padding: 20px;
    }

    .el-row {
        flex-direction: column;
        gap: 30px;
    }

    .el-col {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .el-divider--vertical {
        display: none;
    }

    .footer-section {
        text-align: center;
        padding: 0;
    }

    .social-icons {
        justify-content: center;
    }
}
</style>
